var timeArray = new Array();
var pm25Array = new Array();

$(document).ready(function(){

    $.ajax({
        type:"POST",
        url:"/pm25/periodValues",
        data:{
            startTime:"2018-04-26 23:32:21",
            endTime:timeStampToLocal(Date.parse(new Date()))
        },
        async:true,
        success:function (data) {
            success(data);
        },
        error:function () {
            alert("数据请求失败，请刷新重试！");
        }
    });

});

function success(data){
    // console.log(data);
    var dataObj = eval(data);
    $.each(dataObj, function(i){
        timeArray[i] = timeStampToLocal(dataObj[i].updatetime);
        pm25Array[i] = dataObj[i].value;
    });
    loadEchart();
}

/**
 * 时间格式转换
 * @param timeStamp    1398250549490
 * @returns {string}    2018-01-02 12:45:67
 */
function timeStampToLocal(timeStamp) {
    var date = new Date(timeStamp);
    var Y,M,D,h,m,s;
    Y = date.getFullYear() + '-';
    M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    D = date.getDate() + ' ';
    h = date.getHours() + ':';
    m = date.getMinutes() + ':';
    s = date.getSeconds();
    return Y+M+D+h+m+s;
}

/**
 * 图表绘制
 */
function loadEchart() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'Pm25记录',
            subtext: '仅供参考'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['时间','pm25']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: timeArray
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name:'pm25',
                type:'line',
                data:pm25Array,
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'},
                        [{
                            symbol: 'none',
                            x: '90%',
                            yAxis: 'max'
                        }, {
                            symbol: 'circle',
                            label: {
                                normal: {
                                    position: 'start',
                                    formatter: '最大值'
                                }
                            },
                            type: 'max',
                            name: '最高点'
                        }]
                    ]
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}